<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>创建活动</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/CreateActivity.css">
</head>
<body>

<div class="head-all">
 <iframe src="html/User/UserNavigation.html" class="div-head"></iframe>
<div class="div-box" >
    <h2 align="center">创建活动</h2>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>基本信息</legend>
    </fieldset>
    <form class="layui-form"  method="post">
        <div class="layui-form-item">
            <label class="layui-form-label"><a>*</a>活动主题</label>
            <div class="layui-input-block">
                <input type="text" name="activityName" lay-verify="activityName" autocomplete="off" placeholder="活动主题将显示在大屏幕顶端，不超过3-12个字" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-inline" >
                <label class="layui-form-label"><a>*</a>活动类型</label>
                <div class="layui-inline layui-form" lay-filter="test2">
                    <select lay-verify="required" name="activityType" id="app">
                        <option value=" ">请选择</option>
                        <option v-for="maker in activity" :value="maker.typeId">{{ maker.typeName }}</option>
                    </select>
                </div>
            </div>
        <!--    <div class="layui-inline">
                <label class="form-label"><a>*</a>预计参与人数</label>
                <div class="layui-input-inline">
                    <input style=" position:absolute;" id="ipt" value="0"  class="layui-input">
                    <div style="position:relative;float: right">
                        <button type="button" class="button-up" id="add" onclick="jia()"><i class="layui-icon">&#xe619</i></button><br>
                        <button type="button" class="button-down" id="cut" onclick="jian()"><i class="layui-icon">&#xe61a</i></button>
                    </div>
                </div>

            </div>-->
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><a>*</a>所在区域</label>
            <div class="layui-input-block" id="tpp">
            <input  name="activitySite" v-bind:value="map.data" class="layui-input" readonly="readonly" unselectable="on">
            </div>
            <div id="allmap" style="display: none"></div>
        </div>
        <div class="layui-form-item">
         <div class="layui-inline">
            <label class="form-label"><a>*</a>活动生效时间</label>
            <div class="layui-input-inline">
                <input type="text" id="start_time" name="activityStarttime" autocomplete="off" placeholder="请输入开始时间" class="layui-input" readonly="readonly" unselectable="on">
            </div>
             <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
               <input type="text" id="date" name="activityEndtime" lay-verify="required" autocomplete="off" placeholder="请输入结束时间" readonly="readonly" unselectable="on" class="layui-input dateInput">
            </div>
             <div class="layui-form-mid"> <h3 style="color: red">(活动时间最少为一个小时)</h3></div>
        </div>
    </div>
        <div class="layui-form-item" id="sqbutton">
            <div class="layui-input-block">
                <button onclick="location.reload()" type="reset" class="layui-btn layui-btn-primary">重置</button>
               <button id="submit" class="layui-btn" lay-submit lay-filter="demo1">确认创建</button>
            </div>
        </div>
    </form>
 </div>
</div>
<canvas id="canvas" class="canvas"></canvas>
<script src="layui/layui.js"></script>
<script src="js/custom/type.js"></script>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/custom/CreateActivity.js"></script>
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EB7W2wklYDHQYxMhtBc3BdBGGCu1aM1W&s=1"></script>
 <script>
    var id = localStorage.getItem("userId");
    console.log(id);
    if (id==null) {
        alert("未登录,请登录后创建活动")
        window.location.href="html/User/UserLogin.html";
    }

    var App = new Vue({
        el: '#app',
        data: {
            activity: [],
        },
        mounted: function () {
            this.getMakerList();
        },
        methods: {
            getMakerList: function (e) {
                var vm = this;
                vm.$http.get('/server/type/all').then(function (response) {
                   console.log(response);
                    vm.activity = response.data.data;
                    vm.$nextTick(function () {
                        layui.use(['layer', 'form'], function(){
                            var form = layui.form;
                            form.render();
                        });
                    })
                }, function (response) {
                    console.log('失败');
                });
            },
        }
    });
    var Tpp =new Vue({
        el: '#tpp',
        data: {
            map: [],
        },
        mounted: function () {
            this.mapList();
        },
        methods: {
      mapList:function () {
       var self = this;
       // 百度地图API功能
       var map = new BMap.Map("allmap");
       var point = new BMap.Point(108.95, 34.27);
       map.centerAndZoom(point, 12);
       var geolocation = new BMap.Geolocation();
       var x=0;
       var y=0;
       geolocation.getCurrentPosition(function(r) {
           if(this.getStatus() == BMAP_STATUS_SUCCESS) {
               var mk = new BMap.Marker(r.point);
               map.addOverlay(mk); //标出所在地
               map.panTo(r.point); //地图中心移动
               // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
               x=r.point.lng;//经度
               y=r.point.lat;//纬度
               console.log(x+","+y)
       url="/server/activity/getMap?ip="+y+","+x
       $.ajax({
           url: url,
           type: 'post',
           data: {},
           dataType: 'json'
       }).then(function (res) {
           console.log(res);
           //把从json获取的数据赋值给数组
           self.map = res;
       }).fail(function (res) {
           console.log('map失败'+res);
       })
       } else {
           alert('failed' + this.getStatus());
       }
    })
   },
}
});
layui.use(['form', 'layedit', 'laydate'], function() {
var form = layui.form;

form.on('submit(demo1)', function (data) {
console.info('开始保存');
// * 整合表单数据
var activity = data.field;
console.info(activity);

//获取存储于本地的userId
    var userid = localStorage.getItem("userId");
    console.log(userid);
// * 确定路径
var url = "/server/activity/add?activityStatus=1&userId="+userid;
// * 发起请求
$.ajax({
    data: activity,
    type: "get",
    dataType: "JSON",
    url: url,
    success: function (result) {
        if (result!=null && result!=""){
            alert("创建成功");
            console.info("保存数据成功，返回的数据为：↓ ");
            console.log(result);
            window.location.href="html/userActivity.html";
        } else{
            alert("创建失败");
            console.log("失败") ;
        }
      }
});

return false;
});
});

</script>
</body>
</html>